<template>
    <div class="dawn-setting">
      <div class="setting-item">
        <div class="setting-label">图片上传数量</div>
        <div class="setting-control">
  
          <div class="button-group">
            <van-button size="small" type="primary" @click="decrement" :disabled="parseInt(inputValue) <= 0">
              -
            </van-button>
  
            <van-field v-model="inputValue" type="number" :min="0" @input="handleInput" @blur="handleBlur" />
  
            <van-button size="small" type="primary" @click="increment">
              +
            </van-button>
          </div>
        </div>
      </div>
  
      <div class="setting-item">
        <div class="setting-label">默认照片</div>
        <div class="setting-control">
          <van-switch v-model="settings.default_images" @change="handleSettingChange" />
        </div>
      </div>

      <div class="setting-item">
        <div class="setting-label">随机日志</div>
        <div class="setting-control">
          <van-switch v-model="settings.randomLog" @change="handleSettingChange" />
        </div>
      </div>
  
      <div class="setting-item">
        <div class="setting-label">日志类型</div>
        <div class="setting-control">
          <select
            v-model="settings.logType"
            class="layui-select"
            style="width: 120px; height: 32px; border-radius: 4px; border: 1px solid #dcdfe6; padding: 0 8px; font-size: 14px;"
          >
          <option value="all">全部</option>
            <option value="daily">日报</option>
            <option value="weekly">周报</option>
            <option value="monthly">月报</option>
          </select>
        </div>
      </div>
  
      <div class="save-button">
        <van-button type="primary" block @click="saveSettings" :loading="isSaving">
          保存设置
        </van-button>
      </div>
  
      <!-- 选项说明区域 -->
      <div class="setting-desc">
        <p>选项说明：</p>
        <ul>
          <li><b>图片上传数量</b>：设置每次最多可上传的图片张数，最小为0（可不上传图片），无最大限制。
            <b style="color:red;">(日志照片如果日志列表里面有的上传数据中包含了照片那么这个配置就不会生效)</b>
          </li>
          <li><b>默认照片</b>：开启后，当上传的文件管理->图片上传->图库列表如果没有照片的话会采用默认的照片进行上传, 上传图片的数量由图片上传数量决定<b
            style="color:red;">(请确保请确保文件管理->图片上传->图库列表中不少于图片上传数量，如果不够会导致没有照片上传失败)</b></li>
        
            <li><b>随机日志</b>：随机抽取一条日志进行上传, 关闭的话则按照创建顺序进行上传
            <b style="color:red;">(请确保文件管理->日志导入->日志列表里有对应的日志数据，不然会上传失败(如果日志类型勾选了就会随机上传勾选了类型的日志进行上传))</b>
          </li>
          <li><b>日志类型</b>：可选择全部、日报、周报、月报，上传时会根据类型进行区分。
            <b style="color:red;">(请确保文件管理->日志导入->日志列表里有对应类型的日志数据，不然会上传失败！)</b>
          </li>
        </ul>
      </div>
    </div>
  </template>
  
  <script setup>
  import { ref, onMounted,defineProps, defineEmits} from 'vue';
  import {
    showToast,
    Button,
    showConfirmDialog,
    PullRefresh,
    Checkbox,
    Cell,
    Field,
    Icon,
    Switch as VanSwitch
  } from 'vant';
  import request from '@/utils/request';
  import apiUrls from '@/config/apiUrls';

  const emits = defineEmits(['updata:setting'])
  // 定义接收的 props
const props = defineProps({
  settings: {}
});
  const showLogTypePicker = ref(false);
  
  // 设置数据
  const settings = ref({
    imageCount: props.settings.image_count || 0,
    randomLog: props.settings.random_log || false,
    logType: props.settings.log_type || 'all',
    default_images: props.settings.default_images || false
  });
  
  // 输入框的值
  const inputValue = ref(props.settings.image_count?.toString() || 0);
  const isSaving = ref(false);

  
  // 保存设置
  const saveSettings = async () => {
    // 校验：默认照片开启时，图片数量不能为0
    if (settings.value.default_images && settings.value.imageCount === 0) {
      showToast('开启默认照片时，图片上传数量不能为0！');
      return;
    }
    try {
      console.log('设置体');
      console.log(settings.value);
  
      isSaving.value = true;
      const response = await request.post(apiUrls.settings.logSetting, settings.value);
      if (response.code === 200) {
        showToast(response.message);
        emits('updata:setting');
      } else {
        throw new Error(response.message || '保存失败');
      }
    } catch (error) {
      showToast(error.message);
    } finally {
      isSaving.value = false;
    }
  };
  
  // 处理设置变化
  const handleSettingChange = () => {
    // 当开启默认照片时，检查图片上传数量
    if (settings.value.default_images && settings.value.imageCount === 0) {
      showToast('开启默认照片时，图片上传数量不能为0！');
      settings.value.default_images = false;
    }
  };
  
  // 处理输入
  const handleInput = (value) => {
    // 允许输入框为空
    if (value === '') {
      inputValue.value = '';
      return;
    }
  
    // 处理数字输入
    const numValue = parseInt(value) || 0;
    if (numValue < 0) {
      inputValue.value = '0';
    }
  
    // 更新设置
    settings.value.imageCount = parseInt(inputValue.value);
  };
  
  // 处理失去焦点
  const handleBlur = () => {
    // 如果输入框为空或值小于0，设为0
    if (inputValue.value === '' || parseInt(inputValue.value) < 0) {
      inputValue.value = '0';
    }
  
    // 更新设置
    settings.value.imageCount = parseInt(inputValue.value);
  };
  
  // 增加数量
  const increment = () => {
    const currentValue = parseInt(inputValue.value);
    inputValue.value = (currentValue + 1).toString();
    settings.value.imageCount = currentValue + 1;
  };
  
  // 减少数量
  const decrement = () => {
    const currentValue = parseInt(inputValue.value);
    if (currentValue > 0) {
      inputValue.value = (currentValue - 1).toString();
      settings.value.imageCount = currentValue - 1;
    }
  };
  
  const onLogTypeConfirm = ({ selectedOptions }) => {
    settings.value.logType = selectedOptions[0].value;
    showLogTypePicker.value = false;
  };
  
  // 组件挂载时获取设置
  onMounted(() => {
 
  });
  </script>
  
  <style scoped>
  .dawn-setting {
    padding: 16px;
    background-color: #fff;
  }
  
  .setting-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 0;
    border-bottom: 1px solid #f5f5f5;
  }
  
  .setting-item:last-child {
    border-bottom: none;
  }
  
  .setting-label {
    font-size: 14px;
    color: #323233;
  }
  
  .setting-control {
    display: flex;
    align-items: center;
    gap: 8px;
  }
  
  .button-group {
    display: flex;
    gap: 4px;
  }
  
  .save-button {
    margin-top: 24px;
  }
  
  :deep(.van-field) {
    width: 60px;
    padding: 0;
    text-align: center;
  }
  
  :deep(.van-field__control) {
    text-align: center;
  }
  
  :deep(.van-button) {
    min-width: 32px;
  }
  
  :deep(.van-field__body) {
    height: 100%;
  }
  
  .setting-desc {
    margin-top: 20px;
    color: #888;
    font-size: 13px;
    line-height: 1.7;
    background: #f7f8fa;
    border-radius: 6px;
    padding: 12px 16px;
    max-height: 300px;
    overflow-y: auto;
  }
  
  .setting-desc::-webkit-scrollbar {
    width: 6px;
  }
  
  .setting-desc::-webkit-scrollbar-thumb {
    background-color: #c8c9cc;
    border-radius: 3px;
  }
  
  .setting-desc::-webkit-scrollbar-track {
    background-color: #f7f8fa;
  }
  
  .setting-desc ul {
    margin: 0;
    padding-left: 18px;
  }
  
  .setting-desc li {
    margin-bottom: 4px;
  }
  </style>
  